<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card>
      <el-button
        type="warning"
        @click="addworkPatterns"
      >添加工作模式
      </el-button>
      <el-table
        :data="dataList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          label="工作模式编号"
          align="center"
          prop="id"
        ></el-table-column>
        <el-table-column
          label="工作模式"
          align="center"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="类型"
          align="center"
          prop="workPatternTypeDesc"
        ></el-table-column>
        <el-table-column
          label="工作日期"
          align="center"
          prop="workDate"
        ></el-table-column>
        <el-table-column
          label="工作时间"
          align="center"
          prop="time"
        >
          <template v-slot="scope">
            <span>
              {{ ((scope.row.workEndMinute1 - scope.row.workStartMinute1) /60).toFixed(2) }}小时
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="editWorkPatterns(scope.row)"
            >编辑</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link
              type="danger"
              :underline="false"
              @click="deleteWork(scope.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <div
          v-show="dataList && dataList.length > 0"
          class="pages"
        >
          <el-pagination
            :current-page="formData.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Number(total)"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div></el-card>
    <!-- 新增工作模式弹层 -->
    <el-dialog
      :title="type==='add' ? '新增工作模式' : '编辑工作模式'"
      :visible.sync="dialogVisible"
      width="700px"
      @close="handleClose"
    >
      <el-tabs
        v-model="workPatternType"
      >
        <el-tab-pane
          label="礼拜制"
          name="1"
        >
          <!-- 礼拜制里的内容 -->
          <el-form
            ref="weekForm"
            :rules="rules1"
            :model="weekForm"
            label-width="120px"
          >
            <el-form-item
              prop="name"
              label="工作模式名称"
            >
              <el-input
                v-model="weekForm.name"
                placeholder="请填写工作模式名称"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="week"
              label="连续工作天数"
            >
              <el-row :gutter="10">
                <el-checkbox-group v-model="weekForm.week">
                  <el-col :span="3">
                    <el-checkbox label="周一"></el-checkbox>
                  </el-col>
                  <el-col :span="3">
                    <el-checkbox label="周二"></el-checkbox>
                  </el-col>
                  <el-col :span="3">
                    <el-checkbox label="周三"></el-checkbox>
                  </el-col>
                  <el-col :span="3">
                    <el-checkbox label="周四"></el-checkbox>
                  </el-col>
                  <el-col :span="3">
                    <el-checkbox label="周五"></el-checkbox>
                  </el-col>
                  <el-col :span="3">
                    <el-checkbox label="周六"></el-checkbox>
                  </el-col>
                  <el-col :span="3">
                    <el-checkbox label="周日"></el-checkbox>
                  </el-col>
                </el-checkbox-group>
              </el-row>
            </el-form-item>
            <span class="desc">选中为工作时间,未选中为休息时间</span>
            <el-form-item
              label="工作时间"
              prop="time"
            >
              <el-time-picker
                v-model="weekForm.time"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                @change="handleDate"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item>
              <div
                class="dialog-footer"
                style="text-align: center"
              >
                <el-button
                  type="warning"
                  class="save-btn"
                  size="medium"
                  @click="confirm"
                >确认</el-button>
                <el-button
                  plain
                  class="cancel-btn"
                  @click="handleClose"
                >取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane
          label="连续制"
          name="2"
        >
          <!--连续制里的内容-->
          <el-form
            ref="continuousForm"
            :rules="rules2"
            :model="continuousForm"
            label-width="120px"
          >
            <el-form-item
              label="工作模式名称"
              prop="name"
            >
              <el-input
                v-model="continuousForm.name"
                width="200px"
                placeholder="请填写工作模式名称"
              ></el-input>
            </el-form-item>
            <div class="workDay">
              <el-form-item
                prop="workDayNum"
                label="连续工作天数"
              >
                <span class="shangxiu">上</span>
                <el-input
                  v-model="continuousForm.workDayNum"
                  class="input-small"
                  placeholder="请输入"
                >
                  <i
                    slot="suffix"
                    style="font-style: normal; margin-right: 10px; color: black;"
                  >天</i>
                </el-input>
                <span class="shangxiu">休</span>
              </el-form-item>
              <el-form-item
                label-width="0"
                prop="restDayNum"
              >
                <el-input
                  v-model="continuousForm.restDayNum"
                  class="input-small"
                  placeholder="请输入"
                >
                  <i
                    slot="suffix"
                    style="font-style: normal; margin-right: 10px; color: black;"
                  >天</i>
                </el-input>
              </el-form-item>
            </div>
            <el-form-item
              label="工作时间"
              prop="time"
            >
              <el-time-picker
                v-model="continuousForm.time"
                is-range
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围"
                format="HH:mm"
                @change="handleDate"
              >
              </el-time-picker>
            </el-form-item>
            <el-form-item>
              <div
                class="dialog-footer"
                style="text-align: center"
              >
                <el-button
                  type="warning"
                  class="save-btn"
                  size="medium"
                  @click="confirm"
                >确认</el-button>
                <el-button
                  plain
                  class="cancel-btn"
                  @click="handleClose"
                >取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { workHistoryList, addWorkHistory, deleteWorkHistory, updateWorkHistory, workHistoryInfo } from '@/api/transit'
import { getHMS } from '@/utils/index'
export default {
  data() {
    return {
      id: '', // 工作模式id
      formData: {
        page: 1,
        pageSize: 10
      },
      dataList: [],
      total: null,
      dialogVisible: false,
      workPatternType: '1',
      type: 'add',
      // 礼拜制
      weekForm: {
        name: '', // 工作模式名称
        week: [], // 选中的星期
        workPatternType: '', // 工作类型
        monday: '',
        tuesday: '',
        wednesday: '',
        thursday: '',
        friday: '',
        saturday: '',
        sunday: '',
        time: [
          new Date(2016, 9, 10, 9, 0).getTime(),
          new Date(2016, 9, 10, 18, 0).getTime()
        ],
        workEndMinute1: new Date(2016, 9, 10, 18, 0).getTime(), // 工作结束时间,2016年9月10号18点至此刻的毫秒数
        workStartMinute1: new Date(2016, 9, 10, 9, 0).getTime() // 工作开始时间，2016年9月10号9点至此刻的毫秒数
      },
      // 默认time
      morentime: [
        new Date(2016, 9, 10, 9, 0).getTime(),
        new Date(2016, 9, 10, 18, 0).getTime()
      ],
      continuousForm: {
        name: '',
        week: [],
        workPatternType: '', // 工作类型
        workDayNum: '',
        restDayNum: '',
        monday: '',
        tuesday: '',
        wednesday: '',
        thursday: '',
        friday: '',
        saturday: '',
        sunday: '',
        time: [new Date(2016, 9, 10, 9, 0), new Date(2016, 9, 10, 18, 0)]
      },
      // 礼拜制校验
      rules1: {
        name: [
          {
            required: true,
            message: '请输入工作模式名称',
            trigger: 'blur'
          }
        ],
        week: [
          {
            required: true,
            trigger: 'blur',
            // 自定义校验星期选中
            validator: this.validatorWeek
          }
        ],
        time: [
          {
            required: true,
            trigger: 'blur',
            validator: this.validatorTime
          }
        ]
      },
      // 连续制校验
      rules2: {
        name: [
          {
            required: true,
            message: '输入工作模式名称',
            trigger: 'blur'
          }
        ],
        workDayNum: [
          {
            required: true,
            validator: this.validatorWorkDay,
            trigger: 'blur'
          },
          { pattern: /^[0-9]*$/, message: '必须输入数字', trigger: 'blur' }
        ],
        restDayNum: [
          {
            required: true,
            validator: this.validatorWorkDay,
            trigger: 'blur'
          },
          { pattern: /^[0-9]*$/, message: '必须输入数字', trigger: 'blur' }
        ],
        time: [
          {
            required: true,
            trigger: 'blur',
            validator: this.validatorTime
          }
        ]
      }
    }
  },
  created() {
    this.workHistoryList()
  },
  methods: {
    // 获取列表
    async workHistoryList() {
      const { data } = await workHistoryList(this.formData)
      this.dataList = data.items
      this.total = data.counts
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.formData.pageSize = val
      this.workHistoryList(this.formData)
    },
    // 页面改变事件
    handleCurrentChange(val) {
      this.formData.page = val
      this.workHistoryList()
    },
    // 添加工作模式显示弹窗
    addworkPatterns() {
      this.dialogVisible = true
      this.type = 'add'
    },
    // 编辑模式显示弹框
    async editWorkPatterns(row) {
      this.dialogVisible = true
      this.type = 'edit'
      const { data } = await workHistoryInfo(row.id)
      // 把请求到的数据都赋值给原先的数据
      this.workPatternType = String(data.workPatternType)
      this.id = data.id
      // 如果是礼拜制
      if (data.workPatternType === 1) {
        this.weekForm = {
          // 名字
          name: data.name,
          // 时间
          time: [new Date(2016, 9, 10, 0, 0).getTime() +
          data.workStartMinute1 * 60 * 1000,
          new Date(2016, 9, 10, 0, 0).getTime() +
          data.workEndMinute1 * 60 * 1000],
          // 模式
          workPatternType: data.workPatternType,
          // 开始时间
          workStartMinute1: new Date(2016, 9, 10, 0, 0).getTime() +
          data.workStartMinute1 * 60 * 1000,
          // 结束时间
          workEndMinute1: new Date(2016, 9, 10, 0, 0).getTime() +
          data.workEndMinute1 * 60 * 1000,
          // 星期
          monday: data.monday,
          tuesday: data.tuesday,
          wednesday: data.wednesday,
          thursday: data.thursday,
          friday: data.friday,
          saturday: data.saturday,
          sunday: data.sunday,
          week: [
            data.monday === 1 ? '周一' : '',
            data.tuesday === 1 ? '周二' : '',
            data.wednesday === 1 ? '周三' : '',
            data.thursday === 1 ? '周四' : '',
            data.friday === 1 ? '周五' : '',
            data.saturday === 1 ? '周六' : '',
            data.sunday === 1 ? '周日' : ''
          ]
        }
      } else {
        // 连续制
        this.continuousForm = {
          name: data.name,
          workPatternType: data.workPatternType,
          // 开始时间
          workStartMinute1: new Date(2016, 9, 10, 0, 0).getTime() +
          data.workStartMinute1 * 60 * 1000,
          // 结束时间
          workEndMinute1: new Date(2016, 9, 10, 0, 0).getTime() +
          data.workEndMinute1 * 60 * 1000,
          workDayNum: data.workDayNum,
          restDayNum: data.restDayNum,
          // 时间
          time: [new Date(2016, 9, 10, 0, 0).getTime() +
          data.workStartMinute1 * 60 * 1000,
          new Date(2016, 9, 10, 0, 0).getTime() +
          data.workEndMinute1 * 60 * 1000]
        }
      }
    },
    // 添加工作模式确认按钮
    async confirm() {
      const params = this.dealWithParams(this.type, this.workPatternType)
      await (this.type === 'add'
        ? addWorkHistory(params)
        : updateWorkHistory(Object.assign(params, { id: this.id }))
      ).then((res) => {
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.workHistoryList()
          this.handleClose()
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    // 添加工作模式取消按钮
    handleClose() {
      this.dialogVisible = false
      this.weekForm.name = ''
      this.weekForm.week = []
      this.continuousForm.name = ''
      this.continuousForm.week = []
      this.continuousForm.workDayNum = ''
      this.continuousForm.restDayNum = ''
      this.weekForm.time = this.morentime
    },
    // 礼拜制连续工作天数校验
    validatorWeek(rule, value, callback) {
      if (!this.weekForm.week.length) {
        callback(new Error('请选中连续工作天数'))
      } else {
        callback()
      }
    },
    // 礼拜制和连续制的工作时间校验
    validatorTime(rule, value, callback) {
      if (!this.weekForm.time.length) {
        callback(new Error('请选中工作时间'))
      } else {
        callback()
      }
    },
    // 连续制 连续工作天数校验
    validatorWorkDay(rule, value, callback) {
      if (this.continuousForm.workDayNum === '' && this.continuousForm.restDayNum === '') {
        callback(new Error('输入连续工作天数'))
      } else {
        callback()
      }
    },
    // 删除按钮
    async deleteWork(id) {
      this.$confirm('你确定要删除吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteWorkHistory(id).then((res) => {
          if (res.code === 200) {
            this.$message.success('删除成功')
            this.workHistoryList()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 处理参数
    dealWithParams(type, workPatternType) {
      if (workPatternType === '1') {
        // 礼拜制要传的参数
        return {
          name: this.weekForm.name,
          // 结束时间距当天0点的分钟数
          workEndMinute1:
            // 此处需要将时间转为距离当天0点0分的分钟数的差值
            (this.weekForm.workEndMinute1 -
              new Date(2016, 9, 10, 0, 0).getTime()) /
            1000 /
            60,
          // 开始时间距离当天0点的分钟数
          workStartMinute1:
            (this.weekForm.workStartMinute1 -
              new Date(2016, 9, 10, 0, 0).getTime()) /
            1000 /
            60,
          workPatternType: this.workPatternType,
          // 星期
          monday:
            this.weekForm.week.findIndex((item) => item === '周一') === -1
              ? 2
              : 1,
          tuesday:
            this.weekForm.week.findIndex((item) => item === '周二') === -1
              ? 2
              : 1,
          wednesday:
            this.weekForm.week.findIndex((item) => item === '周三') === -1
              ? 2
              : 1,
          thursday:
            this.weekForm.week.findIndex((item) => item === '周四') === -1
              ? 2
              : 1,
          friday:
            this.weekForm.week.findIndex((item) => item === '周五') === -1
              ? 2
              : 1,
          saturday:
            this.weekForm.week.findIndex((item) => item === '周六') === -1
              ? 2
              : 1,
          sunday:
            this.weekForm.week.findIndex((item) => item === '周日') === -1
              ? 2
              : 1
        }
      } else {
      // 连续制要传的参数
        return {
          name: this.continuousForm.name, // 名字
          workPatternType: this.workPatternType, // 工作类型
          workEndMinute1: (this.continuousForm.workEndMinute1 - new Date(2016, 9, 10, 0, 0).getTime()) / 1000 / 60,
          workStartMinute1: (this.continuousForm.workStartMinute1 - new Date(2016, 9, 10, 0, 0).getTime()) / 1000 / 60,
          workDayNum: this.continuousForm.workDayNum, // 上班天数
          restDayNum: this.continuousForm.restDayNum // 休息天数
        }
      }
    },
    // 处理时间
    handleDate(value) {
      if (this.workPatternType === '1') {
        this.weekForm.time = value
          ? [value[0].getTime(), value[1].getTime()]
          : []
        this.weekForm.workStartMinute1 = value[0].getTime()
        this.weekForm.workEndMinute1 = value[1].getTime()
      } else {
        this.continuousForm.time = value
          ? [getHMS(value[0]), getHMS(value[1])]
          : []
        this.continuousForm.workStartMinute1 = value[0].getTime()
        this.continuousForm.workEndMinute1 = value[1].getTime()
      }
    }
  }
}

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-card {
    margin: 20px;
    height:1100px;
    .el-button {
      width: 125px;
      margin-bottom:20px;
    }
  }
::v-deep .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
::v-deep .pagination{
  padding-bottom: 30px;
}
.tab-box {
  color: #20232a;
  ::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  ::v-deep .el-form-item__content {
    height: 40px;
  }
  ::v-deep .el-tabs__item {
    font-size: 14px;
  }
  ::v-deep .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #e15536;
  }
  ::v-deep .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
    ::v-deep .el-form-item__error {
      position: relative;
      width: 110px !important;
    }
}
::v-deep .el-dialog__body {
  padding-top: 30px !important;
}
::v-deep .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
.pagination {
  margin-top: 40px;
  margin-left: 360px;
}
.el-form {
  .el-form-item {
    margin-bottom: 0px;
    margin-top: 10px;
  }
}
.desc {
  margin-left: 124px;
  color: #bac0cd;
}
.dialog-footer {
  margin-right: 160px;
  margin-top: 20px;
}
 .input-small {
  width: 100px;
}
.shangxiu {
  margin-right: 20px;
  margin-left: 20px;
}
.workDay {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}
::v-deep .el-tabs__item:hover {
  color: black;
}
::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: 700;
}
::v-deep .el-tabs__active-bar {
  background-color: #e15536;
}
</style>
